﻿<template>
  <div class="w-full">
    <h1 class="text-3xl font-bold mb-8">GSAP 动画示例</h1>

    <!-- 滚动动画 -->
    <section class="mb-16">
      <h2 class="text-2xl font-bold mb-4">滚动动画</h2>
      <div class="space-y-8 max-w-full">
        <div
          v-for="i in 3"
          :key="i"
          class="w-full h-32 bg-gradient-to-r from-pink-500 to-purple-500 rounded-lg opacity-0 transform-gpu overflow-hidden"
          :ref="(el) => (scrollBoxRefs[i - 1] = el)"
        ></div>
      </div>
    </section>

    <!-- 基础动画示例 -->
    <section class="mb-16">
      <h2 class="text-2xl font-bold mb-4">基础动画性能对比</h2>
      <div class="flex flex-col sm:flex-row gap-8 mb-4">
        <!-- 使用 GPU 加速 -->
        <div class="flex flex-col items-center gap-4 flex-1">
          <h3 class="text-sm font-medium text-gray-600">使用 GPU 加速</h3>
          <div class="flex gap-4">
            <button
              @click="playBasicAnimation('withGpu')"
              class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 transition-colors"
            >
              播放动画
            </button>
            <div ref="basicBoxWithGpu" class="w-16 h-16 bg-purple-500 rounded transform-gpu"></div>
          </div>
          <p class="text-xs text-gray-500">启用 transform-gpu 实现硬件加速</p>
        </div>

        <!-- 不使用 GPU 加速 -->
        <div class="flex flex-col items-center gap-4">
          <h3 class="text-sm font-medium text-gray-600">不使用 GPU 加速</h3>
          <div class="flex gap-4">
            <button
              @click="playBasicAnimation('withoutGpu')"
              class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 active:bg-blue-700 transition-colors"
            >
              播放动画
            </button>
            <div ref="basicBoxWithoutGpu" class="w-16 h-16 bg-purple-500 rounded"></div>
          </div>
          <p class="text-xs text-gray-500">仅使用 CSS transform</p>
        </div>
      </div>
      <div class="bg-gray-50 p-4 rounded-lg mt-4">
        <p class="text-sm text-gray-600">性能分析指南:</p>
        <ol class="list-decimal list-inside text-sm text-gray-500 space-y-1 mt-2">
          <li>打开浏览器开发者工具 (F12)</li>
          <li>切换到 Performance 面板</li>
          <li>勾选 Enable advanced paint instrumentation</li>
          <li>点击录制按钮开始分析</li>
          <li>播放动画并观察 FPS 和图层合成情况</li>
        </ol>
      </div>
    </section>

    <!-- Timeline 动画序列 -->
    <section class="mb-16">
      <h2 class="text-2xl font-bold mb-4">Timeline 动画序列</h2>
      <div class="flex flex-col gap-4">
        <button
          @click="playTimeline"
          class="w-fit px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 active:bg-green-700 transition-colors"
        >
          播放序列
        </button>
        <div class="flex gap-4">
          <div
            v-for="i in 3"
            :key="i"
            class="w-16 h-16 bg-indigo-500 rounded transform-gpu"
            :ref="(el) => (timelineBoxRefs[i - 1] = el)"
          ></div>
        </div>
      </div>
    </section>

    <!-- 交互动画 -->
    <section class="mb-16">
      <h2 class="text-2xl font-bold mb-4">交互动画</h2>
      <div
        ref="hoverBox"
        class="w-32 h-32 bg-teal-500 rounded-lg cursor-pointer transform-gpu transition-colors hover:bg-teal-600"
        @mouseenter="handleHover"
        @mouseleave="handleHoverOut"
      ></div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

// 注册 ScrollTrigger 插件
gsap.registerPlugin(ScrollTrigger)

// 确保全局可用
if (typeof window !== 'undefined') {
  window.gsap = gsap
  window.ScrollTrigger = ScrollTrigger
}

// 引用元素
const basicBoxWithGpu = ref(null)
const basicBoxWithoutGpu = ref(null)
const timelineBoxRefs = ref([null, null, null])
const scrollBoxRefs = ref([null, null, null])
const hoverBox = ref(null)

// 基础动画
const playBasicAnimation = (type) => {
  const repeats = 50
  const target = type === 'withGpu' ? basicBoxWithGpu.value : basicBoxWithoutGpu.value

  if (!target) return

  gsap.to(target, {
    x: 200,
    rotation: 360,
    duration: 0.5,
    ease: 'none',
    yoyo: true,
    repeat: repeats,
    onComplete: () => {
      gsap.set(target, {
        clearProps: 'all',
      })
    },
  })
}

// Timeline 动画序列
const playTimeline = () => {
  const boxes = timelineBoxRefs.value.filter((box) => box)
  if (boxes.length === 0) return

  const tl = gsap.timeline()

  boxes.forEach((box, index) => {
    tl.to(box, {
      y: -50,
      duration: 0.5,
      ease: 'power2.out',
    }).to(
      box,
      {
        y: 0,
        duration: 0.5,
        ease: 'bounce.out',
      },
      index * 0.2,
    )
  })
}

// 交互动画
const handleHover = () => {
  if (!hoverBox.value) return

  gsap.to(hoverBox.value, {
    scale: 1.2,
    rotation: 15,
    duration: 0.3,
    ease: 'power2.out',
  })
}

const handleHoverOut = () => {
  if (!hoverBox.value) return

  gsap.to(hoverBox.value, {
    scale: 1,
    rotation: 0,
    duration: 0.3,
    ease: 'power2.inOut',
  })
}

// 初始化滚动动画
onMounted(() => {
  const boxes = scrollBoxRefs.value.filter((box) => box)

  boxes.forEach((box, index) => {
    // 设置初始状态
    gsap.set(box, {
      x: index % 2 ? 100 : -100,
      opacity: 0,
      scale: 0.8,
    })

    // 创建滚动触发动画
    gsap.to(box, {
      x: 0,
      opacity: 1,
      scale: 1,
      duration: 1,
      ease: 'power3.out',
      scrollTrigger: {
        trigger: box,
        start: 'top center+=100',
        end: 'bottom center',
        toggleActions: 'play none none reverse',
      },
    })
  })
})
</script>
